<template>
  <div>
    <SelfTitle userName="企业用户"></SelfTitle>
    <p class="all-demand" @click="goback"><span>全部需求</span></p>
    <div class="company-index">
      <!-- 需求展示 -->
      <div class="tableBox">
        <el-table
          border
          :data="demandList"
          style="width: 100%"
          :header-cell-style="{
            background: '#E9E9E9',
            color: '#606266',
            fontWeight: 600,
          }"
        >
          <el-table-column label="序号" width="50" type="index" align="center">
          </el-table-column>
          <el-table-column
            label="需求名称"
            width="100"
            align="center"
            class="demand-name"
          >
            <template slot-scope="scope">
              <div @click="enterReqDetail(scope.row.demand.id)">
                {{ scope.row.demand.demandName }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="demandDescribe"
            label="需求描述"
            align="center"
          >
            <template slot-scope="scope">
              <div class="reqDesc">{{ scope.row.demand.demandDescribe }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="project.projectName"
            label="关联项目"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.project !== undefined || null">
                  {{ scope.row.project.projectName }}
                </div>
                <div v-else>暂无项目</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="项目附件" width="120" align="center">
            <template slot-scope="scope">
              <a
                v-if="scope.row.project !== undefined || null"
                :href="scope.row.project.docFilesUrl"
                class="textUpload"
                >点击下载</a
              >
              <div v-else>文件暂缺</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="relation.value"
            label="需求分类"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column label="需求附件" width="100" align="center">
            <template slot-scope="scope">
              <div>
                <a
                  v-if="scope.row.demand.docFilesUrl !== undefined || null"
                  :href="scope.row.demand.docFilesUrl"
                  class="textUpload"
                  >点击下载</a
                >
                <div v-else>文件暂缺</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="demand.gmtCreated"
            label="发布时间"
            align="center"
            width="200"
          >
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.demand.status==0">未处理</div>
              <div v-if="scope.row.demand.status==1">处理中</div>
              <div v-if="scope.row.demand.status==2">处理完成</div>
              <div v-if="scope.row.demand.status==3">需求关闭</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="assess"
            label="项目评分"
            width="120"
            align="center"
          >
            <template>
              <!-- <div class="reqAllAssess" @click="subjectAssess">
                <i class="el-icon-remove-outline"></i>
              </div> -->
                <div class="reqAllAssess" >
                <i class="el-icon-remove-outline"></i>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 项目评分 -->
      <el-dialog
        :visible.sync="subjectAssessVisible"
        width="35%"
        class="subjectAssessStyle"
      >
        <h2>项目评分</h2>

        <ul>
          <li v-for="(item, index) in subjectData" :key="'subject' + index">
            <span class="subjectOneTitle">
              <span>{{ item.title }}</span>
              <span class="subjectRoleStyle">（{{ item.status }}）</span></span
            >
            <el-rate v-model="item.score"> </el-rate>
          </li>
        </ul>

        <div class="moreInfo">
          <span>备注</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 4 }"
            placeholder="请输入内容"
          >
          </el-input>
        </div>

        <div class="btnBox">
          <el-button
            size="mini"
            type="primary"
            @click="subjectAssessVisible = false"
            >保 存</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="subjectAssessVisible = false"
            >取 消</el-button
          >
        </div>
      </el-dialog>
     <!-- 人员分配 -->
    <div class="person-assign">
      <h3>人员分配 <i class="el-icon-s-promotion"></i></h3>
      <div class="person-assign-box">
        <div
          class="person-assign-item"
          v-for="(item, index) in assignList"
          :key="'personAss' + index"
        >
          <h4>{{ item[0] }}</h4>
          <span v-for="(it, index) in item[1]" :key="'child' + index">{{
            it.name
          }}</span>
        </div>
      </div>
    </div>

       <!-- 评论 -->
    <div class="comment-content">
      <h3>评论<div class="fileUpload">
          <el-upload
            class="upload-demo"
            action="http://112.124.67.43:8088/iot/comment/fileUpload"
            :on-change="handleChange"
            :on-success="successEvent"
            :file-list="fileList"
            :limit="1"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              请上传文件,如果多个附件请上传压缩文件
            </div>
          </el-upload>
        </div> </h3>
      <div class="firstCommentBox">
        <el-avatar :size="50" :src="circleUrl"></el-avatar>
        <el-input v-model="firstComment" placeholder="请输入评论内容..."></el-input>
        <el-button type="primary" @click="commentFirst">评论</el-button>
      </div>
      <div v-if="firstCommentList.length === 0">
        <el-empty description="暂无评论"></el-empty>
      </div>
      <div v-else style="margin-top: 20px;">
        <div
          v-for="(item, index) in firstCommentList"
          :key="index"
          class="commentItemBox"
        >
          <CommentItem :comment="item" @callbackto="callback"></CommentItem>
        </div>
      </div>
    </div>
 
    </div>
  </div>
</template>

<script>
import {
  ReqDemandDetail,
  ReqCommentParent,
  ReqCommentCallBackById,
  ReqAddComment,
  ReqProjectMan,
} from "../../../request/index";
import SelfTitle from "../../../components/SelfTitle.vue";
import CommentItem from "../../../components/CommentItem.vue";
export default {
  components: {
    SelfTitle,
    CommentItem
  },
  data() {
    return {
      // 需求详情
      demandList: [],
      // 评论
      input: "",
      // 评论弹窗展示
      show: false,
      // 项目评分展示
      subjectAssessVisible: false,
      subjectData: [
        { title: "赋能中心", status: "已完成", score: 1 },
        { title: "吴某某", status: "UI设计", score: 2 },
        { title: "张某某", status: "项目经理", score: 3 },
        { title: "赵某某", status: "前端负责人", score: 2 },
        { title: "王某某", status: "后端负责人", score: 3 },
        { title: "王某某", status: "后端负责人", score: 3 },
      ],
      // 项目id
      projectId: "",
      firstComment: "",
      firstCommentList: [],
      assignList: [],
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
       allShowInfo: [],
       commentFileUrl:'',
       fileList:[]
    };
  },
  created() {
    this.initDemand();
    this.getFirstComment();
  },
  methods: {
    // 根据需求id去查询需求详情
    async initDemand() {
      let query = this.$router.history.current.query.id;
      // console.log(query)
      let res = await ReqDemandDetail(query);
      this.demandList.push(res.demandVo);
      if (res.demandVo.project !== undefined) {
        this.projectId = res.demandVo.project.id;
      }
      // 有项目id直接先请求项目人员信息
      if (this.projectId !== "") {
        this.ResProjectMan();
      }
    },
    // 发布评论
     async commentFirst() {
      if(this.firstComment.trim().length === 0) {
        this.$message({
          type:"warning",
          message: '请输入内容'
        })
      }else {
        // let formdata = new FormData();
        // formdata.append("contend",this.firstComment)
        // formdata.append("demandId",this.$router.history.current.query.id)
        // formdata.append("parentId",0)
        // formdata.append("pusherId",sessionStorage.getItem("id"))
        let formdata = {
          docFilesUrl: this.commentFileUrl,
          commentContent: this.firstComment.trim(),
          demandId: this.$router.history.current.query.id,
          parentId: 0,
          pushlisherId: sessionStorage.getItem("id"),
        };
        const resultData = await ReqAddComment(formdata);
        if(resultData.msg=="success"){
           this.$message({
          type:"success",
          message: '评论成功'
        })
        this.firstComment =''
        this.fileList=''
        this.getFirstComment()
        }
      }
    },
     // 获取一级评论
    async getFirstComment() {
      const query = this.$router.history.current.query;
      console.log(query.id);
      const resultData = await ReqCommentParent({
        demandId: query.id,
        limit: 1000,
        page: 1,
      });
      const {
        remarks: { list },
      } = resultData;
      this.firstCommentList = list;
      // 拿到一级评论后,进行遍历循环获取用户信息
      this.firstCommentList.forEach((item) => {
        item.isCallBack = false;
      });
      console.log(this.firstCommentList);
    },
     // 点击回复
    callback(commentId) {
      this.firstCommentList.forEach((item) => {
        if (item.commentEntity.id === commentId) {
          item.isCallBack = true;
        } else {
          item.isCallBack = false;
        }
      });
      this.set = Math.random();
    },
    // 取消评论
    commentCancel() {
      this.firstCommentList.forEach((item) => {
        item.isCallBack = false;
      });
      this.set = Math.random();
    },
    // 查看更多回复
    async seeMoreCallBack(id) {
      const resultData = await ReqCommentCallBackById({ commentId: id });
      const { remarks } = resultData;
      console.log(remarks);
      // 将数据加到全部的评论数据中
      this.firstCommentList.forEach((item) => {
        if (item.commentEntity.id === id) {
          item.children = remarks;
        }
      });
      console.log(this.firstCommentList);
    },
    // 分页请求
     handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.initComment(val);
    },
    // 自定义改变状态的事件
    changeShow(showState) {
      this.show = showState;
    },
    //返回上一层
    goback() {
      this.$router.go(-1);
    },
    // 显示评分弹框
    subjectAssess() {
      this.subjectAssessVisible = true;
    },
    // 根据项目id去查询人员分配
    async ResProjectMan() {
      let data = {
        projectId: this.projectId,
      };
      let man = await ReqProjectMan(data);
      const { scoreVo } = man;
      let map = new Map();
      scoreVo.forEach((item) => {
        if (!map.has(item.position)) {
          map.set(item.position, [item]);
        } else {
          map.get(item.position).push(item);
        }
      });
      this.assignList = Array.from(map);
    },
    // 对文件列表操作
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
     // 文件上传成功时
    successEvent(response, file, fileList) {
      this.commentFileUrl = response.msg;
    },
  },
  
};
</script>

<style scoped>
.company-index {
  padding: 0 90px;
}
.index-row {
  background-color: rgb(255, 255, 255);
}
.all-demand {
  padding-left: 100px;
  margin: 50px 0;
  cursor: pointer;
}
.all-demand > span {
  background-color: #1b93c4;
  padding: 20px 120px;
  color: white;
  font-size: 20px;
  font-weight: 600;
  border-radius: 10px;
}

.reqDesc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.textUpload {
  text-decoration: none;
  color: black;
}
/* 项目评分 */
.subjectAssessStyle h2 {
  color: white;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  line-height: 50px;
}

.btnBox {
  text-align: center;
  margin-top: 40px;
}

.btnBox .el-button {
  margin: 0px 30px;
  background: #1b93c4;
  padding: 10px 30px;
}

.subjectAssessStyle ul {
  text-align: center;
}

.subjectAssessStyle ul li {
  display: flex;
  line-height: 30px;
  font-size: 14px;
  color: white;
}

.subjectRoleStyle {
  color: #f0ab00;
}

.subjectOneTitle {
  display: flex;
}

.subjectOneTitle > :nth-child(1) {
  flex: 1;
  text-align: center;
}

.subjectOneTitle > :nth-child(2) {
  flex: 1;
  text-align: left;
}

.subjectAssessStyle ul li > :nth-child(n) {
  flex: 1;
}
.moreInfo {
  display: flex;
  width: 80%;
  margin: 10px auto;
}

.moreInfo > :nth-child(1) {
  flex: 1;
  color: white;
}

.moreInfo > :nth-child(2) {
  flex: 6;
}

.person-assign {
  margin-top: 40px;
  border: 2px solid #eee;
  padding: 20px;
}
.person-assign h3 {
  font-weight: 600;
}
.person-assign-box {
  margin-top: 15px;
}
.person-assign-item {
  height: 30px;
  display: flex;
}
.person-assign-item h4 {
  font-weight: 600;
  width: 130px;
  text-align: right;
  margin-right: 40px;
}
.person-assign-item span {
  margin-right: 30px;
}
.comment-content {
  margin-top: 20px;
  box-shadow: 0px 0px 5px #ccc;
  padding: 40px;
}
.comment-content h3 {
  font-size: 18px;
  font-weight: 600;
  padding: 20px;
}

.firstCommentBox {
  display: flex;
  align-items: center;
}
.firstCommentBox .el-avatar {
  margin-left: 20px;
}
.firstCommentBox :nth-child(n) {
  margin-right: 10px;
}
.firstCommentBox .el-input {
  width: 80%;
}
.userBaseInfo {
  display: flex;
  align-items: center;
}
.userBaseInfo :nth-child(n) {
  margin-right: 10px;
}
.userBaseInfo :nth-child(2) {
  color: #f0ab00;
}
.userBaseInfo :nth-child(3) {
  color: #aaa;
  font-size: 12px;
}
.commentContent {
  padding: 0px 50px;
  line-height: 30px;
}
.commentContent .callback {
  margin-left: 30px;
  color: #f0ab00;
  font-size: 12px;
  padding: 0px 10px;
  cursor: pointer;
}
.commentBtnStyle {
  width: 80%;
  position: relative;
  margin: 30px 0px;
}
.commentBtnStyle .el-button {
  position: absolute;
}
.commentBtnStyle .commentBtnOne {
  right: 80px;
}
.commentBtnStyle .commentCancel {
  right: 10px;
}
.commentItemBox {
  margin: 10px;
}
.seeMoreCallBackStyle {
  font-size: 12px;
  color: #ccc;
  cursor: pointer;
}
</style>
